 
<template>
  <div class="three-canvas" ref="threeTarget"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { TEngine } from './assets/ts/TEngine'
import { basicObjectList } from './assets/ts/TBasicObject'
import { lightList } from './assets/ts/TLight'
import { helperList } from './assets/ts/THelper'
import { framePromise,createFrame  } from './assets/ts/TLoadModel'
import { gltfPromise,createLogo } from './assets/ts/TLoadModel'
import { Object3D, Mesh, Material } from 'three'

// import { TCanvasTextureEditor } from './assets/ts/TCanvasTextureEditor'

export default defineComponent({
  setup() {
    const threeTarget = ref(null);
    onMounted(() => {
      const TE = new TEngine(threeTarget.value!);
      TE.clearScene();
      //添加基本物体 
      TE.addObject(...basicObjectList);
      TE.addLight(...lightList);
      TE.addHelper(...helperList);
      framePromise.then(group => { 
        TE.addObject(group);
      }); 
      createFrame().then(frame => { 
        frame && TE.addObject(frame);
      }); 
      gltfPromise.then(group => { 
        TE.addObject(...group);
      });
      createLogo().then(group => { 
        TE.addObject(...group);
      });
    });

    return {
      threeTarget
    }
  },
})
</script>


<style>
.three-canvas {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
  /* font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px; */
}
</style>
